<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">textview文本组件</view>
		</view>
		<view class="smart-padding-wrap">
			<text space="ensp" class="text-space">A&nbsp;&emsp;B C\n</text>
			<text space="emsp" class="text-space">A&nbsp;&emsp;B C\n</text>
			<text space="nbsp" class="text-space">A&nbsp;&emsp;B C\n</text>
			<view class="text-box">
				<text selectable="true">{{text}}</text>
			</view>
			<button type="primary" :disabled="!canAdd" @click="add">Add Line
			</button>
			<button type="warn" :disabled="!canRemove" @click="remove">Remove Line</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: ['HBuilder,500万开发者选择的IDE','MUI,轻巧，漂亮的前端开发框架','wap2app,M站快捷转换原生体验的APP','5-Runtime,为HTML5插上原生的翅膀',
				'......'],

				canAdd:true,
				canRemove:false,
				extraLine:[]
				};
		
		},
		methods: {
			add:function(e) {
				this.extraLine.push(this.text[this.extraLine.length % this.text.length]);
				this.text = this.extraLine.join('\n');
				this.canAdd = this.extraLine.length < 12;
				this.canRemove = this.extraLine.length > 0;
			},
			remove:function(e) {
				if (this.extraLine.length > 0) {
					this.extraLine.pop();
					this.text = this.extraLine.join('\n');
					this.canAdd = this.extraLine.length < 12;
					this.canRemove = this.extraLine.length > 0;
				}
					
			
			}
			
		}
	};
</script>

<style>

</style>
